<template>
  <div class="box">
    <div class="bg"></div>
    <van-nav-bar
      id="van-bar"
      :title="title"
      :border="border"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #left>
        <img
          :style="{ width: widthPx, height: heightPx }"
          src="@/assets/iconPerfectInformation/nav_back@2x.png"
        />
      </template>
    </van-nav-bar>
    <div class="active">
      <div :class="{ isActive: isActive == 0 }" @click="qiehuan(0)">
        谁看过我
      </div>
      <div :class="{ isActive: isActive == 1 }" @click="qiehuan(1)">
        我看过谁
      </div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="— THE END —"
      @load="getData"
      class="glance"
      :style="
        'top:' +
        (topheight + 60) +
        'px;height:calc(100vh - ' +
        (topheight + 60) +
        'px);width:100%;overflow:auto;'
      "
    >
      <div class="setting" v-if="isActive == 0">
        <div class="left">
          <p>
            <span class="title">隐身访问</span> <span class="vip1">VIP</span>
          </p>
          <p class="text">打开后对方将看不到你的访问足迹</p>
        </div>
        <van-switch
          v-model="isshow"
          size="12px"
          style="float: right; margin: 15px 0"
        />
      </div>
      <div class="glancelist" v-if="isActive == 0">
        <div class="list" v-for="(item, index) in list" :key="index" @click="goto(item)">
          <img class="headImg" :src="item.user.avatar" alt="" srcset="" />
          <div class="userInfo">
            <p>
              <span class="name">{{ item.user.nickname }}</span>
              <span
                class="sex"
                v-if="item.user.sex == 1"
                style="background-color: #cde1fd"
                ><img src="@/assets/myicon/nan.png" alt="" srcset="" /><span
                  class="age"
                  style="color: #3662ec"
                  >{{ item.user.age }}</span
                ></span
              >
              <span class="sex" v-if="item.user.sex == 2"
                ><img src="@/assets/myicon/nv.png" alt="" srcset="" /><span
                  class="age"
                  >{{ item.user.age }}</span
                ></span
              >
              <span class="vip" v-if="item.user.is_svip!=0
">VIP</span>
            </p>
            <p class="userData">{{ item.user.height }}cm｜{{ item.user.weight }}kg｜{{ item.user.constellation }}｜{{ item.user.occupation }}</p>
            <p class="time">{{item.timetitle}}</p>
          </div>
        </div>
        <!-- <p style="text-align: center;margin: 24px 0;color: #AAAAAA;font-size: 10px;"></p> -->
      </div>
      <div class="glancelist" v-if="isActive == 1">
        <div class="list" v-for="(item, index) in list" :key="index"  @click="goto(item)">
          <img class="headImg" :src="item.user.avatar" alt="" srcset="" />
          <div class="userInfo">
            <p>
              <span class="name">{{ item.user.nickname }}</span>
              <span
                class="sex"
                v-if="item.user.sex == 1"
                style="background-color: #cde1fd"
                ><img src="@/assets/myicon/nan.png" alt="" srcset="" /><span
                  class="age"
                  style="color: #3662ec"
                  >{{ item.user.age }}</span
                ></span
              >
              <span class="sex" v-if="item.user.sex == 2"
                ><img src="@/assets/myicon/nv.png" alt="" srcset="" /><span
                  class="age"
                  >{{ item.user.age }}</span
                ></span
              >
              <span class="vip" v-if="item.user.is_svip!=0
">VIP</span>
            </p>
            <p class="userData">{{ item.user.height }}cm｜{{ item.user.weight }}kg｜{{ item.user.constellation }}｜{{ item.user.occupation }}</p>
            <p class="time">{{item.timetitle}}</p>
          </div>
        </div>
        <!-- <p style="text-align: center;margin: 24px 0;color: #AAAAAA;font-size: 10px;"></p> -->
      </div>
    </van-list>
  </div>
</template>

<script>
import { getGlanceList } from '@/api/index'

export default {
  data() {
    return {
      border: '',
      widthPx: '28px',
      heightPx: '28px',
      topheight: 0,
      isActive: 0,
      isshow: true,
      title: '访客足迹',
      isActive: 0,
      loading: false,
      finished: false,
      searchParameter: {
        //  * 城市编码  为空为首页检索接口
        type: 'seen_me',

        // * 经度 必填
     
      },
      list: [
   
      ],
    }
  },
  mounted() {
    this.topheight = document.getElementById('van-bar').offsetHeight
      

          this.getData()
  },

  methods: {
    goto(e){
      if (e.user.is_merchant==1) {
      this.$router.push({
        path: "/detail",
        query:{id:e.user.uid}
      })  
      }else{
        this.$router.push({
        path: "/userDetail",
        query:{id:e.user.uid}
      })  
      }
    },
    onClickLeft() {
      this.$router.back()
    },
    qiehuan(e) {
      this.isActive = e
      this.list=[]
      this.getData()
    },
    getData() {
      if (this.isActive == 0) {
        this.searchParameter.type = 'seen_me'
      } else {
        this.searchParameter.type = 'seen'
      }
      console.log(this.searchParameter);
       const queryString = Object.keys(this.searchParameter)
        .map((key) => {
          if (this.searchParameter[key] && !!this.searchParameter[key]) {
            return `${encodeURIComponent(key)}=${encodeURIComponent(
              this.searchParameter[key]
            )}`
          }
        })
        .filter((res) => {
          return res
        })
        .join('&')
        console.log(queryString);
      getGlanceList(
       queryString
      ).then((res) => {
        const time = Math.round(new Date().getTime()/1000).toString();
        let list = []
         let time1=0
        res.data.list.forEach((el) => {
          time1=time-el.add_time
          if(time1<3600){
            el.timetitle=Math.round(time1/60)+'分钟前访问过'
            // console.log(el.timetitle);
          }else if(time1<86400){
            el.timetitle=Math.round(time1/3600)+'小时前访问过'
          }else {
            el.timetitle=Math.round(time1/86400)+'天前访问过'
          }
         
        })
        this.list = list.concat(...res.data.list)
        // 加载状态结束
        this.loading = false
        this.finished = true
      })
    },
  },
}
</script>

<style scoped>
.active {
  position: relative;
  margin: 8px auto 0 auto;
  width: 194px;
  display: flex;
  height: 36px;
  background: #e8edfc;
  border-radius: 8px;
}
.active div {
  flex: 1;
  text-align: center;
  line-height: 36px;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #767676;
}
.isActive {
  width: 96px;
  height: 32px;
  background: #ffffff;
  border-radius: 8px;
  line-height: 32px !important;
  margin: 2px;
  color: #1a1a1a !important;
}
.setting {
  padding: 14px 16px;
  box-sizing: border-box;
  background: #e8edfc;
  width: 343px;
  height: 66px;
  margin: 0 auto;
  /* background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%); */
  border-radius: 8px;
  border: 1px solid rgba(82, 117, 241, 0.3);
}
.glance {
  position: absolute;
}
.bg {
  width: 375px;
  height: 88px;
  position: absolute;
  top: 0;
  background: linear-gradient(180deg, #cde1fd 0%, rgba(255, 255, 255, 0) 100%);
}
.glancelist {
  width: 345px;
  margin: 0 auto;
}
.headImg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 7px;
}
.userInfo {
  display: inline-block;
  vertical-align: top;
}
.userData {
  font-size: 12px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #767676;
}
.time {
  margin-top: 16px;
  font-size: 12px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #1a1a1a;
}
.list {
  padding: 16px 0;
  border-bottom: #d8d8d8 solid 1px;
}
.list span {
  display: inline-block;
  vertical-align: top;
}
.name {
  margin-right: 7px;
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #1a1a1a;
}
.sex {
  background-color: #fcdbdb;
  border-radius: 8px;
  height: 16px;
  margin: 3px 7px;
  margin-left: 0;
  width: 38px;
  text-align: center;
  line-height: 16px;
  color: #fa5151;
}
.vip {
  margin: 3px 7px;
  margin-left: 0;
  width: 30px;
  height: 16px;
  background: linear-gradient(180deg, #e8b87a 0%, #fde0b9 100%);
  border-radius: 8px;
  text-align: center;
  line-height: 17px;
  vertical-align: top;
  font-size: 12px;
  color: #663409;
}
.left {
  display: inline-block;
}
.title {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #3d3d3d;
}
.vip1 {
  display: inline-block;
  margin: 3px 7px;
  width: 54px;
  height: 16px;
  background: linear-gradient(180deg, #e8b87a 0%, #fde0b9 100%);
  border-radius: 8px;
  text-align: center;
  line-height: 17px;
  vertical-align: top;
  font-size: 12px;
  color: #663409;
}
.text {
  font-size: 12px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #767676;
}
.sex img {
  margin-right: 2px;
  width: 8px;
  display: inline-block;
  margin-top: 3px;
  height: 12px;
}
.sex .age {
  display: inline-block;
  vertical-align: top;
  line-height: 16px;
  font-size: 12px;
  height: 12px;
}
.van-cell {
  background-color: transparent;
}
.van-cell::after {
  border-color: #d8d8d8;
}
.van-cell__value {
  color: #1a1a1a;
  font-weight: 500;
}
.btn {
  float: right;
  margin: 6px 0;
  text-align: center;
  width: 84px;
  height: 28px;
  border-radius: 8px;
  line-height: 28px;
  border: 1px solid #767676;
  font-size: 12px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #767676;
}
</style>
